<template>
    <div>
        <h1>添加司机</h1>
        <hr>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div><span class="span1">*</span> 司机名字：</div>
                <el-input placeholder="请输入司机名字" v-model="listDRI.input1" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div><span class="span1">*</span>车牌号:</div>
                <el-input placeholder="请输入车牌号" v-model="listDRI.input2" clearable class="input1">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div><span class="span1">*</span> 联系电话：</div>
                <el-input placeholder="请输入联系电话" v-model="listDRI.input3" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div><span class="span1">*</span>登录密码:</div>
                <el-input placeholder="请输入登录密码" v-model="listDRI.input4" clearable class="input1">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div><span class="span1">*</span> 身份证号：</div>
                <el-input placeholder="请输入身份证号" v-model="listDRI.input5" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div><span class="span1">*</span>在职状态:</div>
                <el-radio v-model="listDRI.radio" label="在职">在职</el-radio>
                <el-radio v-model="listDRI.radio" label="离职">离职</el-radio>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div><span class="span1">*</span>所在区域:</div>
                <el-select v-model="listDRI.value" placeholder="请选择" class="input1">
                    <el-option v-for="item in listDRI.options" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div><span class="span1"> *</span>备注：</div>
                <el-input type="textarea" v-model="listDRI.desc" class="input3" :autosize="{ minRows: 5, maxRows: 8 }">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <el-button type="primary" @click="addDri">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-col>
        </el-row>

    </div>
</template>

<script>
export default {
    data() {
        return {
            listDRI: {
                desc: '',   //备注
                input1: '',  //司机名字
                input2: '',  //车牌号
                input3: '',  //联系电话
                input4: '',  //登录密码
                input5: '',  //身份证号
                value: '',
                radio: '1',   //在职状态
                options: [{
                    value: '选项1',
                    label: '成华区'
                }, {
                    value: '选项2',
                    label: '双流区'
                }, {
                    value: '选项3',
                    label: '武侯区'
                }, {
                    value: '选项4',
                    label: '青羊区'
                }, {
                    value: '选项5',
                    label: '金牛区'
                }],
            }
        }
    },
    methods: {
        //    保存按钮
        addDri() {
            this.listDRI.options.forEach(item => {
                this.listDRI.options.label = item.label
            })
            console.log(this.listDRI.options.label);
            this.$axios({
                url: "/driver/add",
                method: "post",
                data: {
                    "area": this.listDRI.options.label,
                    "carNum": this.listDRI.input2,
                    "isjob": this.listDRI.radio,
                    "name": this.listDRI.input1,
                    "password": this.listDRI.input4,
                    "phone": this.listDRI.input3,
                    "image": "dialogImageUrl.jpg"

                }
            }).then((res) => {
                if (res.data.code === 0) {
                    alert("添加成功")
                    this.$router.push('/DriverManagement')
                } else {
                    alert("添加失败")
                }
            })
        },
           // 取消
        cancel(){
              this.$router.push('/DriverManagement')
        }
      
    }
}
</script>

<style scoped>
/* *{
    padding: 0;
    margin: 0;
} */
.input1 {
    width: 400px;
}

.input3 {
    width: 600px;
    height: 150px;
}

.left1 {
    float: left;
}

.span1 {
    color: red;
}

.input2 {
    padding-top: 15px;
    padding-bottom: 15px;
}
</style>